<template lang="pug">
  .mapper
    .title 地市当月订单总额热力图
    div(id="map-charts")
</template>

<script>
import { geoJson } from '../tzmap/geoJson'
export default {
  mounted () {
    this.drawMap()
  },
  methods: {
    drawMap () {
      let myChart = this.$echarts.init(document.getElementById('map-charts'))
      this.$echarts.registerMap('taizhou', geoJson)
      var geoCoordMap = {
        '靖江市': [120.26825, 32.018168],
        '兴化市': [119.840162, 32.938065],
        '泰兴市': [120.020228, 32.168784],
        '高港区': [119.88166, 32.315701],
        '海陵区': [119.920187, 32.488406],
        '姜堰区': [120.148208, 32.508483]
      }
      var data = [
        { name: '靖江市', value: 15 },
        { name: '兴化市', value: 34 },
        { name: '泰兴市', value: 18 },
        { name: '高港区', value: 21 },
        { name: '海陵区', value: 24 },
        { name: '姜堰区', value: 25 }
      ]
      var number = ''
      var convertData = function (data, number) {
        var res = []
        var geoCoord = geoCoordMap[data[number].name]
        if (geoCoord) {
          res.push({
            name: data[number].name,
            value: geoCoord.concat(data[number].value)
          })
        }
        return res
      }
      myChart.setOption({
        backgroundColor: '#09153d',
        legend: {
          orient: 'vertical',
          right: '15%',
          top: '30%',
          data: ['兴化市', '姜堰区', '海陵区', '高港区', '泰兴市', '靖江市'],
          textStyle: {
            color: '#ccc',
            fontSize: 14
          }
        },
        geo: {
          map: 'taizhou',
          show: true,
          itemStyle: {
            normal: {
              areaColor: '#09153d',
              borderColor: '#304487',
              shadowColor: '#304487',
              shadowBlur: 20
            }
          },
          zoom: 1.2
        },
        series: [
          {
            name: '',
            type: 'map',
            map: 'taizhou',
            geoIndex: 1,
            aspectScale: 0.75,
            zoom: 1.2,
            itemStyle: {
              normal: {
                areaColor: 'transparent',
                borderColor: '#3B5077',
                borderWidth: 1
              },
              emphasis: {
                areaColor: '#09153d',
                shadowColor: '#1773c3',
                shadowBlur: 20
              }
            },
            data: data
          },
          {
            name: '靖江市',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'circle',
            symbolSize: function (val) {
              return val[2] * 2
            },
            label: {
              normal: {
                show: true,
                formatter: function (value) {
                  return value.name + '\n' + value.value[2]
                },
                textStyle: {
                  color: '#fff',
                  fontSize: 12
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#00b15e'
              }
            },
            zlevel: 6,
            data: convertData(data, 0)
          },
          {
            name: '兴化市',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'circle',
            symbolSize: function (val) {
              return val[2] * 2
            },
            label: {
              normal: {
                show: true,
                formatter: function (value) {
                  return value.name + '\n' + value.value[2]
                },
                textStyle: {
                  color: '#fff',
                  fontSize: 12
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#e53c19'
              }
            },
            zlevel: 6,
            data: convertData(data, 1)
          },
          {
            name: '泰兴市',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'circle',
            symbolSize: function (val) {
              return val[2] * 2
            },
            label: {
              normal: {
                show: true,
                formatter: function (value) {
                  return value.name + '\n' + value.value[2]
                },
                textStyle: {
                  color: '#fff',
                  fontSize: 12
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#a1de6c'
              }
            },
            zlevel: 6,
            data: convertData(data, 2)
          },
          {
            name: '高港区',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'circle',
            symbolSize: function (val) {
              return val[2] * 2
            },
            label: {
              normal: {
                show: true,
                formatter: function (value) {
                  return value.name + '\n' + value.value[2]
                },
                textStyle: {
                  color: '#fff',
                  fontSize: 12
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#d0d85e'
              }
            },
            zlevel: 6,
            data: convertData(data, 3)
          },
          {
            name: '海陵区',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'circle',
            symbolSize: function (val) {
              return val[2] * 2
            },
            label: {
              normal: {
                show: true,
                formatter: function (value) {
                  return value.name + '\n' + value.value[2]
                },
                textStyle: {
                  color: '#fff',
                  fontSize: 12
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#f0ae1d'
              }
            },
            zlevel: 6,
            data: convertData(data, 4)
          },
          {
            name: '姜堰区',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'circle',
            symbolSize: function (val) {
              return val[2] * 2
            },
            label: {
              normal: {
                show: true,
                formatter: function (value) {
                  return value.name + '\n' + value.value[2]
                },
                textStyle: {
                  color: '#fff',
                  fontSize: 12
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#df7442'
              }
            },
            zlevel: 6,
            data: convertData(data, 5)
          }
        ]
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.mapper
  height 603px
  margin-bottom 20px
  background-color #09153d
  box-shadow: 0 1px 2px 0 rgba(9, 14, 33, 0.75)
  .title
    padding 0 15px
    height 32px
    line-height @height
    background-color #041646
    font-size 14px
  #map-charts
    height calc(100% - 32px)
</style>
